<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{{title}} - 图腾生命医学</title>
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
    <!-- AdminLTE CSS -->
    <link rel="stylesheet" href="/apps/css/adminlte.min.css">
    <style>
        .modal-header .close { margin: -1rem -1rem -1rem auto; }
    </style>
</head>
<body class="hold-transition">
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{title}}</h3>
                            <div class="card-tools">
                                <a href="/apps/loyalty/admin/activities" class="btn btn-tool">
                                    <i class="fas fa-arrow-left"></i> 返回列表
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <form id="activityForm" action="/apps/loyalty/admin/activity" method="POST">
                                <input type="hidden" name="isNew" value="{{isNew}}">

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">活动代码</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="activity_code" 
                                            value="{{activity.activity_code}}" 
                                            {{#unless isNew}}readonly{{/unless}}
                                            pattern="[A-Z]+-\d{4}-\d{2}-\d{2}"
                                            title="格式：LTR-2024-01-01"
                                            required>
                                        <small class="form-text text-muted">格式：LTR-2024-01-01</small>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">活动名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="activity_name" 
                                            value="{{activity.activity_name}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">活动描述</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" name="activity_description" 
                                            rows="3">{{activity.activity_description}}</textarea>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">开始时间</label>
                                    <div class="col-sm-10">
                                        <input type="datetime-local" class="form-control" name="start_time" 
                                            value="{{activity.start_time_fmt}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">结束时间</label>
                                    <div class="col-sm-10">
                                        <input type="datetime-local" class="form-control" name="end_time" 
                                            value="{{activity.end_time_fmt}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">最大抽奖次数</label>
                                    <div class="col-sm-10">
                                        <input type="number" class="form-control" name="max_rounds" 
                                            value="{{activity.max_rounds}}" min="1" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">消耗金豆</label>
                                    <div class="col-sm-10">
                                        <input type="number" class="form-control" name="cost_points" 
                                            value="{{activity.cost_points}}" min="0" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">参与条件</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="conditions" 
                                            value="{{activity.conditions}}" required>
                                        <small class="form-text text-muted">JavaScript条件表达式，例如：true 表示无条件，member.status==1 表示只用于未拉黑用户</small>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-sm-10 offset-sm-2">
                                        <button type="submit" class="btn btn-primary">保存活动</button>
                                    </div>
                                </div>
                            </form>

                            {{#unless isNew}}
                            <div class="mt-4">
                                <h4>奖品管理</h4>
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>奖品ID</th>
                                            <th>名称</th>
                                            <th>中奖提示</th>
                                            <th>初始数量</th>
                                            <th>剩余数量</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each prizes}}
                                        <tr>
                                            <td>{{prize_id}}</td>
                                            <td>{{prize_name}}</td>
                                            <td>{{prize_tips}}</td>
                                            <td>{{initial_quantity}}</td>
                                            <td>{{remaining_quantity}}</td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-primary edit-prize" 
                                                    data-prize-id="{{prize_id}}"
                                                    data-prize-name="{{prize_name}}"
                                                    data-prize-tips="{{prize_tips}}"
                                                    data-initial-quantity="{{initial_quantity}}"
                                                    data-remaining-quantity="{{remaining_quantity}}"
                                                    data-prize-tips="{{prize_tips}}">
                                                    编辑
                                                </button>
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                                <button type="button" class="btn btn-success" id="addPrizeBtn">添加奖品</button>
                            </div>
                            {{/unless}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 奖品编辑模态框 -->
    <div class="modal fade" id="prizeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="prizeModalLabel">编辑奖品</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="prizeForm" action="/apps/loyalty/admin/prize" method="POST">
                    <div class="modal-body">
                        <input type="hidden" name="prize_id" id="prize_id">
                        <input type="hidden" name="activity_code" value="{{activity.activity_code}}">
                        <input type="hidden" name="isNew" id="prizeIsNew" value="true">

                        <div class="form-group">
                            <label>奖品名称</label>
                            <input type="text" class="form-control" name="prize_name" required>
                        </div>

                        <div class="form-group">
                            <label>中奖提示</label>
                            <textarea class="form-control" name="prize_tips" rows="3"></textarea>
                            <small class="form-text text-muted">用户抽中该奖品时显示的提示信息</small>
                        </div>

                        <div class="form-group">
                            <label>初始数量</label>
                            <input type="number" class="form-control" name="initial_quantity" min="0" required>
                        </div>

                        <div class="form-group">
                            <label>剩余数量</label>
                            <input type="number" class="form-control" name="remaining_quantity" min="0" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="/apps/js/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE JS -->
    <script src="/apps/js/adminlte.min.js"></script>
    <script>
    $(document).ready(function() {
        // 编辑奖品
        $('.edit-prize').click(function() {
            const $btn = $(this);
            const modal = $('#prizeModal');

            $('#prizeIsNew').val('false');
            $('#prize_id').val($btn.data('prize-id'));
            modal.find('[name="prize_name"]').val($btn.data('prize-name'));
            modal.find('[name="prize_tips"]').val($btn.data('prize-tips'));
            modal.find('[name="initial_quantity"]').val($btn.data('initial-quantity'));
            modal.find('[name="remaining_quantity"]').val($btn.data('remaining-quantity'));
            modal.find('[name="prize_tips"]').val($btn.data('prize-tips'));

            modal.modal('show');
        });

        // 添加奖品
        $('#addPrizeBtn').click(function() {
            const modal = $('#prizeModal');

            $('#prizeIsNew').val('true');
            $('#prize_id').val('');
            modal.find('form')[0].reset();

            modal.modal('show');
        });

        // 表单验证
        $('#activityForm').submit(function(e) {
            const startTime = new Date($('[name="start_time"]').val()).getTime();
            const endTime = new Date($('[name="end_time"]').val()).getTime();

            if (endTime <= startTime) {
                alert('结束时间必须晚于开始时间');
                e.preventDefault();
                return false;
            }
        });
    });
    </script>
</body>
</html> 
